<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map demo</title>
    <link rel="stylesheet" href="js/lib/ol4.6.4/ol.css" type="text/css">
    <link rel="stylesheet" href="css/demo.css" type="text/css">
</head>
<body>
<div id="map">
</div>
<script src="js/lib/ol4.6.4/ol.js"></script>
<script src="js/lib/jquery/jquery-3.3.1.min.js"></script>
<script>
    var view = new ol.View({
        zoom: 4,
        center:ol.proj.transform([110, 39],"EPSG:4326", "EPSG:3857")
    });

    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([]),
        target: "map",
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w")
        ],
        view: view
    });

    $.get("./data/capital.geojson", function (result) {
        var features = (new ol.format.GeoJSON()).readFeatures(result);
        for(var i=0;i<features.length;i++){
            var _geom = features[i].getGeometry();
            _geom.transform("EPSG:4326", "EPSG:3857");
        }
        var vectorSource = new ol.source.Vector({
            features: features
        });
        var vector = new ol.layer.Vector({
            source: vectorSource,
            style: styleFunction,
            renderMode:"vector"
        });
        map.addLayer(vector);
    });

    /*var vectorSource = new ol.source.Vector({
        url:"./data/capital.geojson",
        format: new ol.format.GeoJSON()
    });
    var features = vectorSource.getFeatures();
    for(var i=0;i<features.length;i++){
        var _geom = features[i].getGeometry();
        _geom.transform("EPSG:4326", "EPSG:3857");
    }
    var vector = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction
    });
    map.addLayer(vector);
    */

    map.on('pointermove', function(evt) {
        if(map.hasFeatureAtPixel(evt.pixel)){
            $(map.getTargetElement()).css("cursor", "pointer");
            map.forEachFeatureAtPixel(evt.pixel, function (features) {
                console.log(features);
                var name = features.get("name");
                console.log(name);
            });
        }else{
            $(map.getTargetElement()).css("cursor", "default");
        }
    });

    function styleFunction(feature) {
        var stroke = new ol.style.Stroke({
            color: 'black',
            width: 2
        });
        var fill = new ol.style.Fill({
            color: 'red'
        });
        var _name = feature.get("name");
        _name = map.getView().getZoom()>6?_name:"";
        var _radius = 8,
            _radius2 = 8;
        if(_name==="北京"){
            _radius = 12;
            _radius2 = 6;
        }
        var styles = [];
        styles.push(new ol.style.Style({
            stroke:stroke,
            fill: fill,
            image: new ol.style.RegularShape({
                fill: fill,
                stroke: stroke,
                points: 5,
                radius: _radius,
                radius2: _radius2,
                angle: 0
            }),
            text: new ol.style.Text({
                text: _name,
                textAlign: "left",
                offsetX:12,
                font:"bold 13px sans-serif",
                fill: new ol.style.Fill({
                    color: 'red'
                }),
                stroke:new ol.style.Stroke({
                    color: 'white',
                    width: 2
                })
            })
        }));
        styles.push(new ol.style.Style({
            geometry: feature.getGeometry(),
            image: new ol.style.Circle({
                radius: 4,
                // stroke: new ol.style.Stroke({
                //     color: "red",
                //     width: 1,
                //     lineCap: "butt"
                // }),
                fill: new ol.style.Fill({
                    color: "white"
                })
            })
        }));

        return styles;
    }

    function getTdtLayer(lyr){
        var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url:url
            })
        });
        return layer;
    }
</script>
</body>
</html>